<template>
  <div class="chat-interface">
    <!-- 侧边栏 -->
    <div class="chat-sidebar" :class="{ collapsed: chatStore.sidebarCollapsed }">
      <ChatSidebar />
    </div>
    
    <!-- 主聊天区域 -->
    <div class="chat-main">
      <ChatMain v-if="chatStore.hasActiveSession" />
      <ChatWelcome v-else />
    </div>
    
    <!-- 移动端遮罩层 -->
    <div 
      v-if="isMobile && !chatStore.sidebarCollapsed" 
      class="mobile-overlay"
      @click="chatStore.toggleSidebar()"
    ></div>
  </div>
</template>

<script setup>
/**
 * AI聊天主界面 - 双栏布局
 * 左侧：会话列表和管理
 * 右侧：当前会话的对话区域或欢迎页面
 */
import { ref, onMounted, onUnmounted } from 'vue'
import { useChatStore } from '@/stores/chat'
import { ElMessage } from 'element-plus'
import ChatSidebar from '@/components/chat/ChatSidebar.vue'
import ChatMain from '@/components/chat/ChatMain.vue'
import ChatWelcome from '@/components/chat/ChatWelcome.vue'

const chatStore = useChatStore()

// 响应式状态
const isMobile = ref(false)

/**
 * 检查是否为移动端
 */
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
  // 在移动端自动收起侧边栏
  if (isMobile.value && !chatStore.sidebarCollapsed) {
    chatStore.toggleSidebar()
  }
}

/**
 * 窗口大小变化处理
 */
const handleResize = () => {
  checkMobile()
}

/**
 * 组件初始化
 */
onMounted(async () => {
  try {
    // 检查移动端状态
    checkMobile()
    
    // 添加窗口大小变化监听
    window.addEventListener('resize', handleResize)
    
    // 加载用户会话列表
    console.log('开始加载用户会话列表...')
    const response = await chatStore.loadUserSessions()
    
    if (response && response.success) {
      console.log(`加载会话成功，共 ${chatStore.sessions.length} 个会话`)
      
      // 如果有会话且没有当前选中的会话，自动选择第一个
      if (chatStore.sessions.length > 0 && !chatStore.currentSessionId) {
        console.log('自动选择第一个会话')
        await chatStore.selectSession(chatStore.sessions[0].sessionId)
      }
    } else {
      console.warn('加载会话失败:', response?.message)
      // 如果加载失败，但不是关键错误，不显示错误提示，让用户正常创建新会话
      if (response?.message && !response.message.includes('网络')) {
        ElMessage.warning('加载会话列表失败，您可以创建新的会话')
      }
    }
  } catch (error) {
    console.error('初始化聊天界面失败:', error)
    ElMessage.error('初始化失败，请刷新页面重试')
  }
})

/**
 * 组件销毁
 */
onUnmounted(() => {
  // 移除事件监听器
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.chat-interface {
  display: flex;
  height: calc(100vh - 60px);
  background-color: #f5f7fa;
  position: relative;
  overflow: hidden;
}

/* 侧边栏 */
.chat-sidebar {
  width: 300px;
  background-color: #ffffff;
  border-right: 1px solid #e1e5e9;
  transition: all 0.3s ease;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 100;
}

.chat-sidebar.collapsed {
  width: 60px;
}

/* 主聊天区域 */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: #f8f9fa;
}

/* 移动端遮罩层 */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  display: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chat-interface {
    height: calc(100vh - 60px);
  }
  
  .chat-sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    height: calc(100vh - 60px);
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 100;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  }
  
  .chat-sidebar:not(.collapsed) {
    transform: translateX(0);
  }
  
  .chat-main {
    width: 100%;
    margin-left: 0;
  }
  
  .mobile-overlay {
    display: block;
  }
}

@media (max-width: 480px) {
  .chat-sidebar {
    width: 260px;
  }
}

/* 加载状态样式 */
.chat-interface:has(.loading) {
  overflow: hidden;
}

/* 错误状态样式 */
.chat-interface:has(.error) .chat-main {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 动画效果 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-main > * {
  animation: slideIn 0.3s ease-out;
}

/* 深色模式支持（预留） */
@media (prefers-color-scheme: dark) {
  .chat-interface {
    background-color: #1e1e1e;
  }
  
  .chat-sidebar {
    background-color: #2d2d2d;
    border-right-color: #3d3d3d;
  }
  
  .chat-main {
    background-color: #1e1e1e;
  }
}

/* 高分辨率屏幕优化 */
@media (min-resolution: 2dppx) {
  .chat-sidebar {
    border-right-width: 0.5px;
  }
}

/* 打印样式 */
@media print {
  .chat-interface {
    height: auto;
    background: white;
  }
  
  .chat-sidebar {
    display: none;
  }
  
  .chat-main {
    width: 100%;
  }
}
</style> 